<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {getEmployerAdminPageAPI, updateEmployerStatusAPI} from "@/apis/employer.ts";


//分页查询岗位和企业信息
const count = 8;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const loading = ref(false);
const list = <any>reactive([]);
const PageDate = <any>ref({
  searchName: '',
  employerStatus: '',//企业状态
  employerIsVerified: '', //企业认证状态
  pageCurrent: pageCurrent.value,
  pageSize: count,
});

const getEmployerList = async (PageDate: any) => {
  const res = await getEmployerAdminPageAPI(PageDate);
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}

//生命周期
onMounted(() => {
  getEmployerList(PageDate.value);
});

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  getEmployerList(PageDate.value).then(() => {
    loading.value = false;
  });
};

//查看
const router = useRouter();
const goToEmployerDetail = (employerId: string) => {
  router.push({
    name: 'ManageEmployerEmployerDetail',
    params: {
      employerId: employerId // 确保传递的参数为字符串类型
    }
  });
};

//搜索
const onSearch = () => {
  list.splice(0, list.length);
  getEmployerList(PageDate.value);
};
//筛选
const check = () => {
  list.splice(0, list.length);
  getEmployerList(PageDate.value);
}

//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}

//管控-岗位状态
const open = ref<boolean>(false);

const showModal = (item: any) => {
  open.value = true;
  modelDate.employerId = item.employerId;
  modelDate.employerCompanyName = item.employerCompanyName;
  modelDate.employerStatus = item.employerStatus;
};

const handleOk = () => {
  open.value = false;
  updateEmployerStatusAPI({
    employerId: modelDate.employerId,
    employerStatus: modelDate.employerStatus,
  }).then((res) => {
    if (res.data.flag) {
      message.success(res.data.message);
      list.splice(0, list.length);
      getEmployerList(PageDate.value);
    } else {
      message.error(res.data.message);
    }
  })
};
const modelDate = reactive({
  employerId: '',
  employerCompanyName: '',
  employerStatus: '',
})

</script>

<template>
  <a-modal v-model:open="open" :title="'管控-'+modelDate.employerCompanyName+'-状态！'" cancelText="取消"
           okText="确认" @ok="handleOk">
    <div style="margin-top: 30px;">
      <a-radio-group v-model:value="modelDate.employerStatus" button-style="solid">
        <a-radio-button style="width: 100px;text-align: center" value="正常">正常</a-radio-button>
        <a-radio-button style="width: 100px;text-align: center" value="封禁">封禁</a-radio-button>
      </a-radio-group>
    </div>

  </a-modal>
  <div class="filter">
    <div class="top">
      <div style="display: flex;align-items: center;">
        <h4 style="margin-right: 10px;">
          搜索 :
        </h4>
        <div style="width: 50%; margin-right: 10px;">
          <a-input-search
              v-model:value="PageDate.searchName"
              allow-clear
              enter-button
              placeholder="搜索企业名称/企业地址"
              @search="onSearch"
          />
        </div>
      </div>
      <div style="display: flex;align-items: center;margin-top: -20px">
        <h4 style="margin-right: 10px;">
          认证状态 :
        </h4>
        <a-radio-group v-model:value="PageDate.employerIsVerified" button-style="solid" @change="check">
          <a-radio-button value="">不限</a-radio-button>
          <a-radio-button value="已认证">已认证</a-radio-button>
          <a-radio-button value="未认证">未认证</a-radio-button>
        </a-radio-group>

        <h4 style="margin-left: 20px;margin-right: 10px">
          企业状态 :
        </h4>
        <a-radio-group v-model:value="PageDate.employerStatus" button-style="solid" @change="check">
          <a-radio-button value="">不限</a-radio-button>
          <a-radio-button value="正常">正常</a-radio-button>
          <a-radio-button value="封禁">封禁</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="bottom">
      <div class="main-title">
        <h4>企 业 管 控</h4>
      </div>
      <div class="main-content">
        <a-list
            :data-source="list"
            :loading="initLoading"
            class="demo-loadmore-list"
            item-layout="horizontal"
        >
          <template #loadMore>
            <div
                v-if="!initLoading && !loading && list.length < pageTotal"
                :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-button @click="onLoadMore">获取更多</a-button>
            </div>
          </template>
          <template #renderItem="{ item }">

            <a-list-item>
              <template #actions>
                <a-button ghost type="primary" @click="goToEmployerDetail(item.employerId)">查看</a-button>
                <a-button ghost type="primary" @click="showModal(item)">管控</a-button>
              </template>
              <a-skeleton :loading="!!item.loading" :title="false" active avatar>
                <a-list-item-meta
                    :description="item.employerCompanyAddress"
                >
                  <template #title>
                    {{ item.employerCompanyName }} &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    状态 : <span
                      :style="{ color: item.employerStatus === '正常' ? 'green' : 'red' }">{{ item.employerStatus }}</span>
                  </template>
                  <template #avatar>
                    <a-avatar
                        :size="54"
                        :src="'http://localhost:8080/image/download?name=' + item.userAvatarUrl"
                    />
                  </template>
                </a-list-item-meta>
                <a-badge-ribbon :color="Color(item.employerIsVerified)" :text="item.employerIsVerified">
                  <div style="border-radius: 10px;width: 180px;background-color: #EAF2FF;padding: 10px">
                    <div>
                      行业: {{ item.employerCompanyIndustry }}
                    </div>
                    <div>
                      官网: {{ item.employerCompanyWebsite }}
                    </div>
                  </div>
                </a-badge-ribbon>
              </a-skeleton>
            </a-list-item>
          </template>
        </a-list>
      </div>


    </div>
  </div>

</template>

<style scoped>
.filter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 15%;
    padding-left: 30px;
    border-bottom: 1px solid #ccc;
  }

  .bottom {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 85%;

    .main-title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .main-content {
      width: 100%;
      flex-grow: 1;
      height: 90%;
      overflow: auto; /* 内容超出时自动显示滚动条 */
    }
  }
}

</style>
